<template>
  <div class="revenue-stats">
    <div class="top-nav">
      <p class="nav-title">电台设置 > 填写信息</p>
    </div>
    <common-form :formConfig="formConfig" @input="onFormUpdated"></common-form>
    <div class="form-operation">
      <button class="form-btn btn-primary" :class="{'btn-disable':publishing}"  @click="doSubmit">保存</button>
    </div>
  </div>
</template>

<script>
  import * as types from '../../../store/mutation-types';
  import CommonForm from '../../form/CommonForm.vue';

  export default {
    name: 'Expert',
    components:{
      "common-form":CommonForm
    },
    data() {
      let editingInfoData = this.$store.state.createInfo.editingInfoData;
      return {
        formData: {},
        validate: {},
        specialColumnId:editingInfoData.id,
        previewPopup: null,
        formConfig: [{
          name: 'title',
          title: '电台标题',
          desc: '',
          require: true,
          type: 'text',
          value: editingInfoData.title,
          extra: {
            placeHolder: '请输入名称',
            limit: [1, 24, 1]
          }
        },{
          name: 'photo',
          title: '电台头像',
          require: true,
          type: 'cover',
          value: editingInfoData.photo,
          extra: {
            fileDesc: '要求清晰、健康、代表品牌形象 请勿使用二维码，最大500k，200x200像素',
            maxFileSize:500*1024,
            width: 200,
            height: 200,
            viewWidth:100,
            viewHeight:100
          }
        }],
        publishing: false,
        submit: false
      };
    },
    computed: {
      hasChange: {
        cache: false,
        get() {
          let changed = 0;
          this.formConfig.forEach((item) => {
            let formItem = this.formData[item.name];
            if (formItem && formItem !== item.value) {
              changed++;
            }
          });
          return changed;
        }
      }
    },
    methods: {
      onFormUpdated({formData, validate, byUser}) {
        this.formData = formData;
        this.validate = validate;
      },
      doSubmit() {
        if (!this.publishing) {
          for (let i = 0; i < this.formConfig.length; i++) {
            let config = this.formConfig[i];
            let validate = this.validate[config.name];
            if (!validate.ok) {
              this.$store.dispatch('alert', `${config.title}${validate.info}`);
              return false;
            }
          }
          this.publishing = true;
          console.log("save");
        }
      }
    }
  };
</script>

<style lang="less" rel="stylesheet/less">
  .top-nav{
    height: 40px;
    margin-bottom: 30px;
    border-bottom: 1px solid #2e9057;
    .nav-title{
      font-size: 20px;
      color: #2e9057;
    }
  }
  .form-table{}
</style>
